[#ftl]
[@define "agile.RadiusEditor","agile._MetadataEditor"]
 [#assign templateString]
 <table cellspacing="3px">
 	<tr>		
 		<td valign="top" nowrap="true" title="{i18n_border_radius_tooltip}" class="tooltip">{i18n_border_radius}</td>
		<td><div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="borderTopLeftRadiusX" regExp="^(\s*|[0-9]+(px)?|0.[0-9]+|[0-9]+%)$" unit="px"  required="true" defValue="0px" title="{i18n_top_left_radius_X_tooltip}" placeHolder="top-left X"></div></td>
		<td><div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="borderTopRightRadiusX" regExp="^(\s*|[0-9]+(px)?|0.[0-9]+|[0-9]+%)$" unit="px"  required="true" defValue="0px" title="{i18n_top_right_radius_X_tooltip}" placeHolder="top-right X"></div></td>																					
		<td><div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="borderBottomLeftRadiusX" regExp="^(\s*|[0-9]+(px)?|0.[0-9]+|[0-9]+%)$" unit="px"  required="true" defValue="0px" title="{i18n_bottom_right_radius_X_tooltip}" placeHolder="bottom-right X"></div></td>
		<td><div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="borderBottomRightRadiusX" regExp="^(\s*|[0-9]+(px)?|0.[0-9]+|[0-9]+%)$" unit="px"  required="true" defValue="0px" title="{i18n_bottom_left_radius_X_tooltip}" placeHolder="bottom-left X"></div></td>					
	</tr>
	<tr>	
		<td></td>
		<td><div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="borderTopLeftRadiusY" regExp="^(\s*|[0-9]+(px)?|0.[0-9]+|[0-9]+%)$" unit="px"  required="true" defValue="0px" title="{i18n_top_left_radius_Y_tooltip}" placeHolder="top-left Y"></div></td>
		<td><div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="borderTopRightRadiusY" regExp="^(\s*|[0-9]+(px)?|0.[0-9]+|[0-9]+%)$" unit="px"  required="true" defValue="0px" title="{i18n_top_right_radius_Y_tooltip}" placeHolder="top-right Y"></div></td>																					
		<td><div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="borderBottomLeftRadiusY" regExp="^(\s*|[0-9]+(px)?|0.[0-9]+|[0-9]+%)$" unit="px"  required="true" defValue="0px" title="{i18n_bottom_right_radius_Y_tooltip}" placeHolder="bottom-right Y"></div></td>
		<td><div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="borderBottomRightRadiusY" regExp="^(\s*|[0-9]+(px)?|0.[0-9]+|[0-9]+%)$" unit="px"  required="true" defValue="0px" title="{i18n_bottom_left_radius_Y_tooltip}" placeHolder="bottom-left Y"></div></td>
	</tr>
</table>
[/#assign] 
 templateString:"${templateString?js_string}",name:"borderRadius",htmlName:"border-radius"
 ,propertyEditors:["borderTopLeftRadiusX","borderTopRightRadiusX","borderBottomLeftRadiusX","borderBottomRightRadiusX","borderTopLeftRadiusY","borderTopRightRadiusY","borderBottomLeftRadiusY","borderBottomRightRadiusY"]
 ,init:function(){	 
	
	 array.forEach(["borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],function(attr){
		 var xeditor = this[attr+"X"];
		 var yeditor = this[attr+"Y"];
		 xeditor.watch("value",lang.hitch(this,function(name,oldValue,value){
//			 console.log(this.declaredClass,"xeditor change:",arguments,",_notWatchValue=",this._notWatchValue,yeditor.get("value"), yeditor.defValue);
			 if(!this._notWatchValue){
				 if(xeditor.isValid()){
					 if(yeditor.get("value") == yeditor.defValue){
						 yeditor.reset1("value",value);
					 }
	
					 this.onChange(this.get("value"),this.name,this.htmlName);			 
				 }
			 }
			 //this._notWatchValue = false;
		 }));
		 	 
		 yeditor.watch("value",lang.hitch(this,function(name,oldValue,value){	
//			 console.log(this.declaredClass,"yeditor change:",arguments,",_notWatchValue=",this._notWatchValue,xeditor.get("value") , xeditor.defValue);
			 if(!this._notWatchValue){
				 if(yeditor.isValid()){
					 if(xeditor.get("value") == xeditor.defValue){
						 xeditor.reset1("value",value);
					 }
					 
					this.onChange(this.get("value"),this.name,this.htmlName);					 	 
				 }	
			 }
			 //this._notWatchValue = false;
		 }));
	 },this);
	
 }	
	,get:function(name){
		if(name == "value"){
			var valueX = this.borderTopLeftRadiusX.get("value") +" "+ this.borderTopRightRadiusX.get("value")+" "+ this.borderBottomLeftRadiusX.get("value")+" "+ this.borderBottomRightRadiusX.get("value");
			var valueY = this.borderTopLeftRadiusY.get("value") +" "+ this.borderTopRightRadiusY.get("value")+" "+ this.borderBottomLeftRadiusY.get("value")+" "+ this.borderBottomRightRadiusY.get("value");
			valueX = valueX.trim();
			valueY = valueY.trim();
			if(valueX == "0px 0px 0px 0px" && valueY == "0px 0px 0px 0px"){
				return "";
			}
			return valueX + "/" + valueY;			
		}
		return this.inherited(arguments);
	}
	,set:function(name,value){
		if(name == "value"){
			var radiusX = [""];
			var radiusY = [""];			
			var xvalue = value[this.htmlName];
//			console.log("@@@@@@@set value=",xvalue);
			if(xvalue){
				if(xvalue.indexOf("/") != -1){
					var radius = xvalue.split("/");
					radiusX = radius[0].split(" ");
					radiusY = radius[1].split(" ");
				}
				else{
					radiusX = value.split(" ");
					radiusY = radiusY;
				}
			}
			this.borderTopLeftRadiusX.reset1("value",radiusX[0]);
			this.borderTopRightRadiusX.reset1("value",radiusX[1] == undefined?radiusX[0]:radiusX[1]);			
			this.borderBottomLeftRadiusX.reset1("value",radiusX[2] == undefined?radiusX[0]:radiusX[2]);
			this.borderBottomRightRadiusX.reset1("value",radiusX[3] == undefined?radiusX[0]:radiusX[3]);
			
			this.borderTopLeftRadiusY.reset1("value",radiusY[0]);
			this.borderTopRightRadiusY.reset1("value",radiusY[1] == undefined?radiusY[0]:radiusY[1]);			
			this.borderBottomLeftRadiusY.reset1("value",radiusY[2] == undefined?radiusY[0]:radiusY[2]);
			this.borderBottomRightRadiusY.reset1("value",radiusY[3] == undefined?radiusY[0]:radiusY[3]);

			//notify watch callback if any
			this.inherited(arguments);
		}else if(name == "disabled" || name == "readOnly"){
			for(var i = 0; i < this.propertyEditors.length; i++){
				this[this.propertyEditors[i]].set(name,value);
			}
		}else{
			this.inherited(arguments);
		}
	}
	,reset1:function(name,value){
		if(name == "value"){		
			
			var radiusX = [""];
			var radiusY = [""];
			var xvalue = value[this.htmlName];
//			console.log("reset@@@@@@@value=",xvalue);
			if(xvalue){
				if(xvalue.indexOf("/") != -1){
					var radius = xvalue.split("/");
					radiusX = radius[0].split(" ");
					radiusY = radius[1].split(" ");
				}
				else{
					radiusX = value.split(" ");
					radiusY = radiusY;
				}
			}
			this._notWatchValue = true;
			this.borderTopLeftRadiusX.reset1("value",radiusX[0]);
			this.borderTopRightRadiusX.reset1("value",radiusX[1] == undefined?radiusX[0]:radiusX[1]);			
			this.borderBottomLeftRadiusX.reset1("value",radiusX[2] == undefined?radiusX[0]:radiusX[2]);
			this.borderBottomRightRadiusX.reset1("value",radiusX[3] == undefined?radiusX[0]:radiusX[3]);
			
			this.borderTopLeftRadiusY.reset1("value",radiusY[0]);
			this.borderTopRightRadiusY.reset1("value",radiusY[1] == undefined?radiusY[0]:radiusY[1]);			
			this.borderBottomLeftRadiusY.reset1("value",radiusY[2] == undefined?radiusY[0]:radiusY[2]);
			this.borderBottomRightRadiusY.reset1("value",radiusY[3] == undefined?radiusY[0]:radiusY[3]);
		
			this._notWatchValue = false;
		}else{
			this.inherited(arguments);
		}
	}
	
	,isValid:function(){
		for(var i = 0; i < this.propertyEditors.length; i++){
			if(!this[this.propertyEditors[i]].isValid()){
				return false;
			}
		}
		return true;
	}
[/@]
